<template>
	<div>
        <div class="afterSaleTop">
            <div style="font-size:16px;">
                <span>{{afterSaleType}}{{getSec()}}</span>
            </div>
            <div v-if="stateList && stateList.length">{{showTime()}}</div>
        </div>
        <ul class="aui-list aui-list-in">
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-title" >{{allInfo.orderType==2? '退积分数' :'退款总金额'}}</div>																											<!--ticketList-->
                    <div v-if="allInfo.orderType!=2" class="aui-list-item-right" style="margin-right:0.5rem;color:#EF5423">
                        ¥ {{allInfo.realityAmount?Number(allInfo.realityAmount).toFixed(2):'0.00'}}
                    </div>
                    <div v-if="allInfo.orderType==2" class="aui-list-item-right" style="margin-right:0.5rem;color:#EF5423">
                        {{allInfo.realityAmount||0}} 积分
                    </div>
                </div>
            </li> 
        </ul>
       <ul class="aui-list aui-media-list commodity_list subtotal_list aui-margin-b-15">
            <li v-if="!qujianFlag" class="aui-list-item" style="margin:0;padding:0;background:#f5f5f5;">
                <div style="width:100%;display:flex;text-align:center;padding-top:1.5rem;padding-bottom:0.8rem;">
                    <div style="width:66.66%;display:flex;position:absolute;top:1.5rem;left:16.66%;">
                        <!-- 线 -->
                        <div class="xiantiaoSuccess" style="width:50%;display:flex;flex-direction: column;align-self:flex-end;">
                        </div>
                        <div class="xiantiaoDoing" v-if="afterSaleState === 0 || afterSaleState === 3" style="width:50%;display:flex;flex-direction: column;align-self:flex-end;">
                        </div>
                        <div class="xiantiaoSuccess" v-if="afterSaleState === 1" style="width:50%;display:flex;flex-direction: column;align-self:flex-end;">
                        </div>
                        <div class="xiantiaoFail" v-if="afterSaleState === 2" style="width:50%;display:flex;flex-direction: column;align-self:flex-end;">
                        </div>
                    </div>
                    <div class="stateBoxOne">
                        <!-- 点 -->
                        <div class="yuandian"></div>
                        <!-- :style="{color:afterSaleState === 3?'#38b035':'#444'}" -->
                        <div class="marginState" style="color:#444;">用户申请</div>
                        <!-- :style="{color:afterSaleState === 3?'#38b035':'#999'}" -->
                        <div class="dateColor" style="color:#444;">{{stateList.length?getTime(stateList[0].approvalDate):''}}</div>
                    </div>
                    <div class="stateBoxOne">
                        <!-- :style="{background:afterSaleState === 3?'#999':'#38b035'}" -->
                        <div class="yuandian"></div>
                        <!-- :style="{color:afterSaleState === 0?'#38b035':afterSaleState === 3?'#999':'#444'}" -->
                        <div class="marginState" :style="{color:afterSaleState === 0 || afterSaleState === 3?'#38b035':'#444'}" >{{afterSaleType}}处理中</div>
                        <!-- :style="{color:afterSaleState === 0?'#38b035':'#999'}" -->
                        <div class="dateColor" :style="{color:afterSaleState === 0 || afterSaleState === 3?'#38b035':'#444'}">{{stateList.length?getTime(stateList[0].approvalDate):''}}</div>
                    </div>
                    <!-- 处理中 -->
                    <div class="stateBoxOne" v-if="afterSaleState === 0 || afterSaleState === 3">
                        <div class="yuandianDoing"></div>
                        <div class="marginState" style="color:#999">{{afterSaleType}}成功</div>
                        <!-- <div class="dateColor" style="color:#999">{{stateList.length>2?getTime(stateList[2].approvalDate):''}}</div> -->
                    </div>
                    <!-- 成功 -->
                    <div class="stateBoxOne" v-if="afterSaleState === 1">
                        <div class="yuandianSuccess"></div>
                        <div class="marginState" style="color:#38b035">{{afterSaleType}}成功</div>
                        <div class="dateColor" style="color:#38b035">{{stateList.length>2?getTime(stateList[2].approvalDate):''}}</div>
                    </div>
                    <!-- 失败 -->
                    <div class="stateBoxOne" v-if="afterSaleState === 2">
                        <div class="yuandianFail"></div>
                        <div class="marginState" style="color:#ef5422">{{afterSaleType}}失败</div>
                        <div class="dateColor" style="color:#ef5422">{{stateList.length>2?getTime(stateList[2].approvalDate):''}}{{stateList.length==2?getTime(stateList[1].approvalDate):''}}</div>
                    </div>
                </div>
            </li>
            <li v-if="qujianFlag" class="aui-list-item" style="margin:0;padding:0;background:#f5f5f5;" >
                <div style="width:75%;display:flex;position:absolute;top:1.5rem;left:12.5%;">
                    <!-- 线 -->
                    <div class="xiantiaoSuccess" style="width:33.33%;display:flex;flex-direction: column;align-self:flex-end;">
                    </div>
                    <div class="xiantiaoDoing" v-if="afterSaleState === 0 || afterSaleState === 3" style="width:33.33%;display:flex;flex-direction: column;align-self:flex-end;">
                    </div>
                    <div class="xiantiaoSuccess" style="width:33.33%;display:flex;flex-direction: column;align-self:flex-end;">
                    </div>
                    <div class="xiantiaoDoing" v-if="afterSaleState === 4" style="width:33.33%;display:flex;flex-direction: column;align-self:flex-end;">
                    </div>
                     <div class="xiantiaoSuccess" v-if="afterSaleState === 1" style="width:33.33%;display:flex;flex-direction: column;align-self:flex-end;">
                    </div>
                    <div class="xiantiaoFail" v-if="afterSaleState === 2" style="width:33.33%;display:flex;flex-direction: column;align-self:flex-end;">
                    </div>
                </div>
                <div style="width:100%;display:flex;text-align:center;padding-top:1.5rem;padding-bottom:1.5rem;">
                    <div class="stateBoxTow">
                        <div class="yuandian"></div>
                        <div class="marginState" style="color:#444">用户申请</div>
                        <div class="dateColor" style="color:#444">{{stateList.length?getTime(stateList[0].approvalDate):''}}</div>
                    </div>
                    <div class="stateBoxTow" >
                        <div class="yuandian"></div>
                        <div class="marginState" style="color:#444">{{afterSaleType}}受理</div>
                        <div class="dateColor" style="color:#444">{{stateList.length?getTime(stateList[0].approvalDate):''}}</div>
                    </div>
                    <div  class="stateBoxTow" v-if="afterSaleState === 4">
                        <div class="yuandian"></div>
                        <div class="marginState" style="color:#38b035">上门取件</div>
                        <div class="dateColor" style="color:#38b035">{{stateList.length?getTime(stateList[2].approvalDate):''}}</div>
                    </div>
                    <div  class="stateBoxTow" v-if="afterSaleState === 1 || afterSaleState === 2">
                        <div class="yuandian"></div>
                        <div class="marginState" style="color:#444">上门取件</div>
                        <div class="dateColor" style="color:#444">{{stateList.length?getTime(stateList[2].approvalDate):''}}</div>
                    </div>
                    <div class="stateBoxTow" v-if="afterSaleState === 0 || afterSaleState === 4">
                        <div class="yuandianDoing"></div>
                        <div class="marginState" style="color:#999">{{afterSaleType}}成功</div>
                        <!-- <div class="dateColor" style="color:#999">{{stateList.length>2?getTime(stateList[2].approvalDate):''}}</div> -->
                    </div>
                    <div class="stateBoxTow" v-if="afterSaleState === 1">
                        <div class="yuandianSuccess"></div>
                        <div class="marginState" style="color:#38b035">{{afterSaleType}}成功</div>
                        <div class="dateColor" style="color:#38b035">{{stateList.length>2?getTime(stateList[2].approvalDate):''}}</div>
                    </div>
                    <div class="stateBoxTow" v-if="afterSaleState === 2">
                        <div class="yuandianFail"></div>
                        <div class="marginState">{{afterSaleType}}失败</div>
                        <div class="dateColor" style="color:#444">{{stateList.length?getTime(stateList[3].approvalDate):''}}</div>
                    </div> 
                </div>
            </li>
       </ul>
	</div>
</template>

<script>
import {mapGetters} from "vuex";
export default {
  	name: 'address',
  	data () {
    	return {
            afterSaleType:'退款',
            state: 0, //state 3 用户提交申请  0 处理中 1 申请成功  2 申请失败 4 上门取件（a）
            stateList:[], //里面放入 stateArr中的第一个 倒数第二个和倒数第一个状态
            sce:[
                "申请提交成功，请等待审核。",
                "申请受理中，请耐心等待。",
                "成功，您的退款已经返回原支付渠道。",
                "失败，感谢您对宁家鲜生的支持。"
            ],
            qujianFlag:false
		}
	},
    props: {
        stateArr:{
            type:Array,
            default:function(){
                return []
            }
        },
        allInfo:{
            type:Object,
            default:function(){
                return {}
            }
        }
    },
	computed: {
		getStateArr(){
            return this.stateArr;
        },
        afterSaleState(){
            return this.state;
        }
	},
    watch: {
        allInfo(newVal,oldVal){
            //获取页面展示的信息
            console.log(newVal,'allInfo')
            if(newVal.serviceType == 1){
                this.afterSaleType = '退款' ;
            }else if(newVal.serviceType == 2){ 
                this.afterSaleType = '退货' ;
            }
            if(newVal.orderType == 2){
                this.afterSaleType = '退积分' ;
            }
        },
        getStateArr(newVal,oldVal){

            this.checkReturnStatus(newVal); //判断状态
            this.getStateList(newVal); //获取展示的对象
            // console.log(this.stateList,'嗯哼');
        }
    },
    methods: {
        getSec(){
            if(this.afterSaleState == 3){
                return this.sce[0];
            }else if(this.afterSaleState == 0 || this.afterSaleState == 4){
                return this.sce[1];
            }else if(this.afterSaleState == 1){
                return this.sce[2];
            }else if(this.afterSaleState == 2){
                return this.sce[3];
            }
        },
        showTime(){
            if(this.afterSaleState == 3){
               return this.stateList[0].approvalDateStr;
            }else if(this.afterSaleState == 0){
               let num = this.stateList[0].approvalDate + 10000;
               let str = this.getScondTime(num);
               return str;
            }else{
                return this.stateList[this.stateList.length-1].approvalDateStr
            }
        },
        getStateList(newVal){
            let length = 0;
            if(newVal && newVal.length){
                length = newVal.length;
            }
            if(length == 0){
                return;
            }
            if(!this.qujianFlag){
                //非上门取件
                if(length == 1){
                    this.stateList.push(newVal[0])
                }else if(length == 2){
                    this.stateList.push(newVal[0]);
                    this.stateList.push(newVal[1]);
                }else{
                    this.stateList.push(newVal[0]);
                    this.stateList.push(newVal[1]);
                    this.stateList.push(newVal[length-1]);
                }
            }else{
                // 上门取件  有上门取件状态时就会起码有 3 个状态 申请  客服审核 上门取件
                if(length == 3){
                    this.stateList.push(newVal[0]);
                    this.stateList.push(newVal[1]);
                    this.stateList.push(newVal[2]);
                }else if(length > 3){
                    this.stateList.push(newVal[0]);
                    this.stateList.push(newVal[1]);
                    this.stateList.push(newVal[2]);
                    this.stateList.push(newVal[length-1]);
                }
            }
            this.stateList = this.stateList.reverse();
        },
        //过滤售后状态再进行展示
        checkReturnStatus(arr){
            console.log(arr,'所有状态')
            let successFlag = false;
            let failFlag = false;
            //判断是否有上门取件节点
            arr.map((item,index)=>{
                if(item.approvalState == 16){
                    this.qujianFlag = true;
                }
            })
            
            // 1 提交申请   2，4，6，9，11处理中   12成功   3，5，8，10，13失败
            let newArr = [];
            if(!arr && !arr.length){
                return;
            }
            //状态值多于一个说明已申请 
            
            if(arr[0].approvalState == 1){
                this.state = 3;
            }else if(
                arr[0].approvalState == 2 ||
                arr[0].approvalState == 4 || 
                arr[0].approvalState == 6 ||
                arr[0].approvalState == 9 ||
                arr[0].approvalState == 11
            ){
                //处理中
                this.state = 0;
                
            }else if(
                arr[0].approvalState == 3 ||
                arr[0].approvalState == 5 || 
                arr[0].approvalState == 8 ||
                arr[0].approvalState == 10 ||
                arr[0].approvalState == 13
            ){
                //申请失败
                this.state = 2;
                failFlag = true;
            }else if(arr[0].approvalState == 12){
                //申请成功
                this.state = 1;
                successFlag = true;
            }
            //如果有取件状态 并且没有成功或者失败当前状态就为取件
            if(this.qujianFlag && !successFlag && !failFlag){
                //后台新增状态 如果是16就代表上门取件
                this.state = 4; 
            }
            console.log(this.state,'state')
        },
        //转换s时间格式
        getScondTime(param){
            console.log(param)
            if(param){
                let date = new Date(param);
                let year = date.getFullYear();
                let month = checkTime(date.getMonth() + 1);
                let day = checkTime(date.getDate());
                let hour = checkTime(date.getHours());
                let min = checkTime(date.getMinutes());
                let sec = checkTime(date.getSeconds());

                function checkTime(i) {
                    if (i < 10) {
                        i = '0' + i;
                    }
                    return i;
                }
                return year + '-' + month + '-' + day + ' ' + hour + ':' + min + ':' + sec;
            }else{
                return '';
            }
        },
        //转换时间格式
        getTime(param){
            console.log(param)
            if(param){
                let date = new Date(param);
                let year = date.getFullYear();
                let month = checkTime(date.getMonth() + 1);
                let day = checkTime(date.getDate());
                let hour = checkTime(date.getHours());
                let min = checkTime(date.getMinutes());
                let sec = checkTime(date.getSeconds());

                function checkTime(i) {
                    if (i < 10) {
                        i = '0' + i;
                    }
                    return i;
                }
                return year + '-' + month + '-' + day + ' ' + hour + ':' + min;
            }else{
                return '';
            }
        }
    },
	components: {
		
	},
	created () {
        // console.log(this.stateArr,'打印状态列表')
	},
	mounted () {
		
	},
	updated() {
    },
    
}
</script>

<style scoped>
	.yuandian{
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;
        background: #38b035;
        position: absolute;
        left: 50%;
        top: -0.25rem;
    }
     .yuandianDoing{
        width: 1rem;
        height: 1rem;
        border-radius: 50%;
        background: #cecfcd;
        position: absolute;
        left: 50%;
        top: -0.5rem;
    }
    .yuandianDoing::before{
        content: '';
        width: .5rem;
        height: .3rem;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -.25rem;
        margin-top: -.25rem;
        background: 0 0;
        border: 1px solid #fff;
        border-top: none;
        border-right: none;
        z-index: 2;
        -webkit-border-radius: 0;
        border-radius: 0;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    .yuandianDoing::after{
        content: '';
        width: .5rem;
        height: .3rem;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -.25rem;
        margin-top: -.25rem;
        background: 0 0;
        border: 1px solid #fff;
        border-top: none;
        border-right: none;
        z-index: 2;
        -webkit-border-radius: 0;
        border-radius: 0;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
     .yuandianSuccess{
        width: 1rem;
        height: 1rem;
        border-radius: 50%;
        background: #38b035;
        position: absolute;
        left: 50%;
        top: -0.5rem;
    }
    .yuandianSuccess::before{
        content: '';
        width: .5rem;
        height: .3rem;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -.25rem;
        margin-top: -.25rem;
        background: 0 0;
        border: 1px solid #fff;
        border-top: none;
        border-right: none;
        z-index: 2;
        -webkit-border-radius: 0;
        border-radius: 0;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    .yuandianSuccess::after{
        content: '';
        width: .5rem;
        height: .3rem;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -.25rem;
        margin-top: -.25rem;
        background: 0 0;
        border: 1px solid #fff;
        border-top: none;
        border-right: none;
        z-index: 2;
        -webkit-border-radius: 0;
        border-radius: 0;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    .yuandianFail{
        width: 1rem;
        height: 1rem;
        border-radius: 50%;
        background: #ef5422;
        position: absolute;
        left: 50%;
        top: -0.5rem;
    }
    .yuandianFail::before{
        content: '';
        width: .5rem;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -.25rem;
        background: 0 0;
        border: 1px solid #fff;
        border-top: none;
        border-right: none;
        z-index: 2;
        -webkit-border-radius: 0;
        border-radius: 0;
        transform: rotate(-45deg);
    }
    .yuandianFail::after{
        content: '';
        width: .5rem;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -.25rem;
        background: 0 0;
        border: 1px solid #fff;
        border-top: none;
        border-right: none;
        z-index: 2;
        -webkit-border-radius: 0;
        border-radius: 0;
        transform: rotate(-135deg);
    }
    .xiantiaoDoing{
        border-top:2px solid #cecfcd;
    }
    .xiantiaoSuccess{
        border-top:2px solid #38b035;
    }
    .xiantiaoFail{
        border-top:2px solid #ef5422;
    }
    .stateBoxOne{
        width:33.33%;
        display:flex;
        flex-direction: column;
        position:relative;
    }
    .stateBoxTow{
        width:25%;
        display:flex;
        flex-direction: column;
        position:relative;
    }
    .marginState{
        margin-top: 0.75rem;
    }
    .dateColor{
        color: #999;
        font-size: 12px;
    }
    .afterSaleTop{
        background:#55c951;
        display: flex;
        color:#fff;
        flex-direction: column;
        justify-content: center;
        padding: 1.5rem 0.75rem;
    }
</style>
